<template>
    <div style="height: 1360px;">
        <div style="width: 90%;margin-top: 30px;margin-left:5% ;background-color:	#F5F5F5	;height: 250px;">
            <!-- 进度条 -->
            <el-steps :active="active" finish-status="success" style="width: 70%;margin-left:15%;padding-top: 15px;">
                <el-step title="选择拼团商品"></el-step>
                <el-step title="填写基础信息"></el-step>
                <el-step title="修改商品详情"></el-step>
            </el-steps>
            <hr>



            <!-- 选择商品 -->
            <div v-if="active == 0">
                <div style="margin-top: 20px; height: 40px;">
                    <span style="color: red;margin-left: 100px;">*</span>选择商品
                    <i class="el-icon-camera"
                        style="margin-top: 10px;padding-top: 5px;padding-left:5px ;background-color: #fff;width:40px;height: 40px;font-size: 30px;"></i>
                </div>
                <el-button type="primary" style="margin-left: 170px;margin-top: 25px;" @click="next">下一步</el-button>
            </div>

            <!-- //添加 -->
            <div v-if="active == 1" style="background-color:	#F5F5F5	;height: 1300px;">
                <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="商品图片" v-model="ruleForm.name" prop="name">
                        <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
                            :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>
                    <el-form-item label="商品轮播图" v-model="ruleForm.region" prop="region">
                        <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
                            :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>
                    <el-form-item label="砍价活动名称">
                        <el-input v-model="ruleForm.name"
                            placeholder="【现货发顺丰 6期免息】vivo X60 5G新品拍照智能手机5nm旗舰芯片蔡司光学镜头官方旗舰店官网正品限量纪念版"></el-input>
                    </el-form-item>
                    <el-form-item label="砍价活动简介" prop="delivery">
                        <el-input type="textarea" v-model="ruleForm.desc"
                            placeholder="【现货发顺丰 6期免息】vivo X60 5G新品拍照智能手机5nm旗舰芯片蔡司光学镜头官方旗舰店官网正品限量纪念版"></el-input>
                    </el-form-item>
                    <el-form-item label="单位" prop="number" :rules="[
                        { required: true, message: '数量不能为空' },
                        { type: 'number', message: '数量必须为数字值' }
                    ]">
                        <el-input v-model="ruleForm.number" style="width: 200px;"></el-input>
                    </el-form-item>
                    <el-form-item label="活动日期" prop="resource">
                        <div class="block">
                            <span class="demonstration">默认</span>
                            <el-date-picker v-model="ruleForm.value1" type="monthrange" range-separator="至"
                                start-placeholder="开始月份" end-placeholder="结束月份">
                            </el-date-picker>
                        </div>
                    </el-form-item>
                    <!-- <el-form-item label="砍价（单位 小时）" prop="desc">
                        <el-input-number v-model="ruleForm.num" @change="handleChangeHouse" :min="1" :max="10" label="描述文字">
                        </el-input-number>
                    </el-form-item>  -->
                    <el-form-item label="砍价人数" prop="desc">
                        <el-input-number v-model="ruleForm.num" @change="handleChangePeople" :min="1" :max="10"
                            label="描述文字">
                        </el-input-number>
                    </el-form-item>
                    <el-form-item label="砍价次数" prop="desc">
                        <el-input-number v-model="ruleForm.num" @change="handleChangeBuy" :min="1" :max="10"
                            label="描述文字">
                        </el-input-number>
                    </el-form-item>
                    <el-form-item label="购买数量限制" prop="desc">
                        <el-input-number v-model="ruleForm.num" @change="handleChangeSort" :min="1" :max="10"
                            label="描述文字">
                        </el-input-number>
                    </el-form-item>

                    <el-form-item label="运费模板" prop="desc">
                        <el-select v-model="ruleForm.value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="活动状态" prop="desc">
                        <el-radio v-model="ruleForm.radio" label="1">关闭</el-radio>
                        <el-radio v-model="ruleForm.radio" label="2">开启</el-radio>
                    </el-form-item>
                    <el-form-item label="商品属性" prop="desc">

                        <el-table :data="tableData" style="width: 100%">
                            <el-table-column type="selection" width="55">
                            </el-table-column>
                            <el-table-column label="ID" prop="date">
                            </el-table-column>
                            <el-table-column label="拼团图片" prop="name">
                            </el-table-column>
                            <el-table-column label="拼团名称" prop="date">
                            </el-table-column>
                            <el-table-column label="原价" prop="name">
                            </el-table-column>
                            <el-table-column label="结束时间" prop="date">
                            </el-table-column>
                            <el-table-column label="拼团状态">
                                <template slot-scope="{row}">
                                    <el-switch v-model="row.shelf_state" class="switch" :active-value="1"
                                        :inactive-value="0" @change="handleStatusChange($event, row)" />
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">
                                        删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>

                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="formrule(ruleForm)">提交</el-button>

                        <el-button type="primary" @click="prev">上一步</el-button>
                        <el-button type="primary" @click="next">下一步</el-button>
                    </el-form-item>
                </el-form>
            </div>




            <div v-if="active == 2">
                <div style="margin-top: 20px;background-color:	#F5F5F5	;height: 720px;">
                    <span style="color: red;margin-left: 100px;">*</span>商品详情
                    <el-card style="height: 610px;width: 80%;margin-left: 10%;">
                        <quill-editor v-model="content" ref="myQuillEditor" style="height: 500px;"
                            :options="editorOption">
                        </quill-editor>
                    </el-card>
                    <el-button type="primary" style="margin-left: 170px;margin-top: 30px;" @click="prev">上一步</el-button>
                    <el-button type="primary" style="margin-left: 40px;margin-top: 30px;">提交</el-button>
                </div>
            </div>


        </div>
    </div>
</template>

<script>

import {
    quillEditor
} from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'


export default {
    name: 'FuncFormsEdit',
    components: {
        quillEditor
    },
    data() {
        return {
            content: null,
            editorOption: {},
            active: 0,
            ruleForm: {
                // num: 1,
                radio: 1,
                name: '',
                // region: '',
                // date: 1,
                // date2: '',
                // delivery: false,
                // type: [],
                // resource: '',
                desc: '',
                value: '',
                number: ''
            },

            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }],
            //拼团实效
            handleChangeHouse: null,
            //拼团人数
            handleChangePeople: null,
            //购买数量限制
            handleChangeBuy: null,
            //排序
            handleChangeSort: null,
            //图片
            handlePictureCardPreview: null,
            dialogVisible: null,
            handleRemove: null,
            dialogImageUrl: null,
            // form
            rules: null,
            // formrule:null,

            rules: {
                number: [
                    { required: true, message: '请输入数量' },
                    { type: 'number', message: '数量必须为数字值' }
                ],
            }

        }

    },
    computed: {

    },
    created() {
        this.selectData()
    },
    methods: {
        
        //下一页
        next() {
            if (this.active++ > 3) this.active = 0;
        },
        //上一页
        prev() {
            if (this.active > 0) this.active--;
        },

        formrule(ruleForm) {
            console.log(ruleForm)
            // formrule(ruleForm).then((res) => {
            //     console.log(res);
            // })
        },


        // formrule(formName) {
        //     this.$refs[formName].validate((valid) => {
        //         if (valid) {
        //             const tempData = Object.assign({}, this.ruleForm)
        //             createMarketing(tempData).then((res) => {
        //                 if(res.code == 20000){
        //                 // this.getAll()
        //                 this.$notify({ title: '添加', message: '添加成功!', type: 'success', duration: 2000 })
        //                 this.$router.push({ name: '/discount_index'}) ;
        //                 }
        //             })
        //         } else {
        //             this.$notify({ title: '添加', message: '添加失败!', type: 'fail', duration: 2000 })
        //             return false;
        //         }
        //     });
        // },
        // resetForm(formName) {
        // this.$refs[formName].resetFields();
        // }
    }







}



</script>

<style lang="scss" scoped>
.app-container {
    .roles-table {
        margin-top: 30px;
    }

    .permission-tree {
        margin-bottom: 30px;
    }
}
</style>



